<template>
  <div class="login">
    <div class="box">
      <!-- 图标 -->
      <div class="cc">
        <img src="@/assets/logo.png" alt="" />
      </div>
      <!-- 表单布局 -->
      <div class="form">
        <!-- 用户名 -->
        <el-form :model="model" :rules="rules" ref="form">
          <el-form-item prop="username">
            <el-input v-model="model.username" :maxlength="10" prefix-icon="el-icon-user-solid">
            </el-input>
          </el-form-item>
        </el-form>
        <!-- 密码 -->
        <el-form :model="model" :rules="rules">
          <el-form-item prop="password">
            <el-input
              v-model="model.password"
              :maxlength="15"
              type="password"
              prefix-icon="el-icon-s-promotion"
            ></el-input>
          </el-form-item>
        </el-form>
        <div class="button">
          <el-button type="primary" @click="userLogin" :loading="loading">登录</el-button>
          <el-button type="info" @click="reset">重置</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入接口
import { login } from 'api/user';

import {getMenus} from 'api/rights'

export default {
  name: "login",
  data() {
    return {
        /**
         * 登录loading
         */
        loading:false,
      /**
       * @description 用户登录信息
       */
      model: {
        username: "admin",
        password: "123456",
      },
      /**
       * 规则
       */
      rules: {
        username: [
          {
            required: true,
            message: "用户名不能为空",
          },
          {
            min: 3,
            max: 10,
            message: "用户名长度为3-10个字符",
          },
        ],
        password: [
          {
            required: true,
            message: "密码不能为空",
          },
          {
            min: 6,
            max: 15,
            message: "密码长度为6-15个字符",
          },
        ],
      },
    };
  },
  methods:{
    /**
     * 用户登录
     */
    async userLogin(){
        try {
            // 校验
            await this.$refs.form.validate();
            // 开启loading
            this.loading = true;
            // 接收值
            const data = await login(this.model);
            // Vuex里的用户方法
            this.$store.commit('setUser',data);
            // 请求菜单
            const menus = await getMenus();
            this.$store.commit('setMenus',menus);
            // 打印数据
            console.log(data);
            // 跳转页面
            this.$router.push({name:"homelayout"});
        } catch (error) {
            console.log(error);
        }
        // 结束loading
        this.loading = false;
    },
    /**
     * 重置
     */
    reset(){
        this.$refs.form.resetFields();
        this.model = {};
    }
  }
};
</script>

<style lang="scss" scoped>
.login {
  width: 100%;
  height: 100%;
  padding: 20px;
  position: relative;
  background-color: var(--mainBackColor);
}
.box {
  width: 450px;
  height: 300px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -225px;
  margin-top: -150px;
  background-color: #fff;
}
.cc {
  width: 130px;
  height: 130px;
  position: absolute;
  left: 50%;
  top: 0;
  border-radius: 50%;
  background-color: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px #ccc;
  border: 1px solid #eee;
}
img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  padding: 10px;
  box-sizing: border-box;
}

.form {
  width: 91%;
  // padding:20px;
  position: absolute;
  padding-left: 20px;
  bottom: 45px;
}

.button{
    margin-left: 135px;
}
</style>